class Tab {
    constructor(id) {
        this.main = document.querySelector(id); //大盒子
        // this.lis = this.main.querySelectorAll('li'); //小标签
        // this.sections = this.main.querySelectorAll('section'); //内容区域
        this.add = this.main.querySelector('.tab_add'); //新增
        this.ul = this.main.querySelector('.first_nav ul:first-child'); //新增
        this.fsection = this.main.querySelector('.tabs_con'); //新增
        this.count = 3;
        this.init(); //初始化
    }
    updateNode() { //更新li和section元素
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
    }
    init() {
        this.updateNode();
        var that = this;
        this.add.onclick = function() {
            that.addTab();
        }
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            this.lis[i].onclick = function() {
                that.toggleTab(this);
            }
        }
    }
    clearClass() {//清除li和section的类
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }
    toggleTab(el) { //切换标签页
        this.clearClass();
        el.className = 'li_active';
        this.sections[el.index].className = 'con_active';
    } 

    addTab() {//添加标签页
        this.clearClass();
        var li = '<li class="li_active"><span>' + '标签' + (++this.count) + '</span><span class="iconfont icon-close"></span></li>';
        // var time = new Date().getTime();
        var section = '<section class="con_active">' + '测试' + this.count + '</section>';
        this.ul.insertAdjacentHTML('beforeend', li);
        this.fsection.insertAdjacentHTML('beforeend', section);
        this.init();
    }
}
new Tab('#tab');